import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Clipboard, Image } from 'react-native';
import { Container, Content, View, Button, Text, Icon } from 'native-base';
import { ListItem, Avatar } from 'react-native-elements';
import { connect } from 'react-redux';
import Moment from 'moment';
import LinearGradient from 'react-native-linear-gradient';

import { Header } from '../../component';
import { Colors, Metrics } from '../../theme';


class UserStar extends Component {
	constructor(props) {
		super(props);
		this.state = {

		}
	}


	UNSAFE_componentWillMount() {

	}

	componentDidMount() {

	}

	render() {
		return (
			<Container>
				<Header title="星级达人" onLeftPress={() => this.props.navigation.goBack()} />
				<Content>
					<View style={Styles.container}>
						<View style={Styles.myLvCont}>
							<LinearGradient style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center", paddingTop: 15, paddingBottom: 15, width: Metrics.screenWidth * 0.95, borderRadius: 8 }} colors={[Colors.subjectJbZuo, Colors.subject]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
								<Image source={require('../../asserts/images/lv/star3.png')} style={[Styles.barIcon, { marginLeft: 20 }]} />
								<Text style={{ fontSize: 14, padding: 14, color: Colors.bai, marginRight: 10 }}>您是尊敬的：三星达人</Text>
							</LinearGradient>
						</View>

						<View style={Styles.lvConten}>
							<View style={Styles.lvConten1}>
								<Image source={require('../../asserts/images/lv/star1.png')} style={Styles.barIcon} />
								<View style={Styles.lvMargin}>
									<Text style={[Styles.lvLvtext, { color: Colors.star1 }]}>一星达人</Text>
									<Text style={Styles.lvWsmSxf}>1.直推实名10</Text>
									<Text style={Styles.lvWsmSxf}>2.团队活跃度500</Text>
									<Text style={Styles.lvWsmSxf}>3.小区活跃度20</Text>
								</View>
							</View>
							<View style={[Styles.drDescCont,{borderTopColor: Colors.star1}]}>
								<Text style={Styles.lvName}>奖励1个初级矿机+全球提现手续费10%</Text>
							</View>
						</View>


						<View style={Styles.lvConten}>
							<View style={Styles.lvConten1}>
								<Image source={require('../../asserts/images/lv/star2.png')} style={Styles.barIcon} />
								<View style={Styles.lvMargin}>
									<Text style={[Styles.lvLvtext, { color: Colors.star2 }]}>二星达人</Text>
									<Text style={Styles.lvWsmSxf}>1.直推实名20</Text>
									<Text style={Styles.lvWsmSxf}>2.团队活跃度2000</Text>
									<Text style={Styles.lvWsmSxf}>3.小区活跃度400</Text>
								</View>
							</View>
							<View style={[Styles.drDescCont,{borderTopColor: Colors.star2}]}>
								<Text style={Styles.lvName}>奖励1个初级矿机+全球提现手续费15%</Text>
							</View>
						</View>


						<View style={Styles.lvConten}>
							<View style={Styles.lvConten1}>
								<Image source={require('../../asserts/images/lv/star3.png')} style={Styles.barIcon} />
								<View style={Styles.lvMargin}>
									<Text style={[Styles.lvLvtext, { color: Colors.star3 }]}>三星达人</Text>
									<Text style={Styles.lvWsmSxf}>1.直推实名50</Text>
									<Text style={Styles.lvWsmSxf}>2.团队活跃度8000</Text>
									<Text style={Styles.lvWsmSxf}>3.小区活跃度2000</Text>
								</View>
							</View>
							<View style={[Styles.drDescCont,{borderTopColor: Colors.star3}]}>
								<Text style={Styles.lvName}>奖励1个初级矿机+全球提现手续费20%</Text>
							</View>
						</View>

						<View style={Styles.lvConten}>
							<View style={Styles.lvConten1}>
								<Image source={require('../../asserts/images/lv/star4.png')} style={Styles.barIcon} />
								<View style={Styles.lvMargin}>
									<Text style={[Styles.lvLvtext, { color: Colors.star4 }]}>四星达人</Text>
									<Text style={Styles.lvWsmSxf}>1.直推实名100</Text>
									<Text style={Styles.lvWsmSxf}>2.团队活跃度80000</Text>
									<Text style={Styles.lvWsmSxf}>3.小区活跃度20000</Text>
								</View>
							</View>
							<View style={[Styles.drDescCont,{borderTopColor: Colors.star4}]}>
								<Text style={Styles.lvName}>奖励1个初级矿机+全球提现手续费10%</Text>
							</View>
						</View>

						<View style={Styles.lvConten}>
							<View style={Styles.lvConten1}>
								<Image source={require('../../asserts/images/lv/star5.png')} style={Styles.barIcon} />
								<View style={Styles.lvMargin}>
									<Text style={[Styles.lvLvtext, { color: Colors.star5 }]}>五星达人</Text>
									<Text style={Styles.lvWsmSxf}>1.直推实名200</Text>
									<Text style={Styles.lvWsmSxf}>2.团队活跃度500000</Text>
									<Text style={Styles.lvWsmSxf}>3.小区活跃度100000</Text>
								</View>
							</View>
							<View style={[Styles.drDescCont,{borderTopColor: Colors.star5}]}>
								<Text style={Styles.lvName}>奖励1个初级矿机+全球提现手续费5%</Text>
							</View>
						</View>


					</View>
				</Content>
			</Container>
		);
	}

}

const mapStateToProps = state => ({
	logged: state.user.logged,
	token: state.user.token,
	phone: state.user.phone,
	nickName: state.user.nickName,
	head_portrait: state.user.head_portrait,
	inviteCode: state.user.inviteCode,
	position: state.user.position,
	regTime: state.user.regTime,
	level: state.user.level,

});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)(UserStar);

const Styles = StyleSheet.create({
	container: { flex: 1, backgroundColor: Colors.huiED, paddingBottom: 20 },
	myLvCont: { flexDirection: "row", justifyContent: "center", alignItems: "center", marginTop: 20 },
	lvConten: { justifyContent: "center", alignItems: "center", flex:1, marginTop: 20, paddingTop: 10, paddingBottom: 10, backgroundColor: Colors.bai, marginLeft: 10, marginRight: 10, borderRadius: 10 },
	lvConten1: { flex:1, flexDirection: "row", justifyContent: "center", alignItems: "center" },
	lvMargin: { marginLeft: 5 },
	lvLvtext: { color: Colors.hui33, fontSize: Metrics.fontSize16, lineHeight: 30 },
	lvWsmSxf: { color: Colors.hui99, fontSize: Metrics.fontSize12 },
	lvName: { color: Colors.hui66, fontSize: Metrics.fontSize14, lineHeight: 30, marginTop: 5 },
	barIcon: { width: 88, height: 88, marginRight: 5 },
	drDescCont: { flex:1, marginTop: 10, justifyContent: "center", alignItems: "center", borderTopWidth: 1 }
});